<template>
  <div class="container">
    <div>
      <!--    单选题-->
      <div v-if="perViewData.dan.length > 0" class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.dan[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.dan" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div>({{ t.score }}分)</div>
              </div>
            </div>
            <div>
              <div class="container-dan-item" v-for="(itemDan,indexDan) in 6" :key="indexDan">
                <el-radio v-if="indexDan === 0" disabled label="1">A.{{ t.A }}</el-radio>
                <el-radio v-if="indexDan === 1" disabled label="1">B.{{ t.B }}</el-radio>
                <el-radio v-if="indexDan === 2" disabled label="1">C.{{ t.C }}</el-radio>
                <el-radio v-if="indexDan === 3" disabled label="1">D.{{ t.D }}</el-radio>
                <el-radio v-if="indexDan === 4 && t.E != '' " disabled label="1">E.{{ t.E }}</el-radio>
                <el-radio v-if="indexDan === 5 && t.F != '' " disabled label="1">F.{{ t.F }}</el-radio>
              </div>
            </div>
            <div class="container-dan-answer">
              <div class="container-dan-answer-left">
                <span>正确答案</span>：<span>{{ decrypted(t.dan) }}</span>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!--    end-->


      <!--    多选题-->
      <div v-if="perViewData.duo.length > 0" class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.duo[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.duo" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div>({{ t.score }}分)</div>
              </div>
            </div>
            <div>
              <div class="container-dan-item" v-for="(itemDduo,indexDduo) in 6" :key="indexDduo">
                <el-checkbox v-if="indexDduo === 0" disabled label="1">A.{{ t.A }}</el-checkbox>
                <el-checkbox v-if="indexDduo === 1" disabled label="1">B.{{ t.B }}</el-checkbox>
                <el-checkbox v-if="indexDduo === 2" disabled label="1">C.{{ t.C }}</el-checkbox>
                <el-checkbox v-if="indexDduo === 3" disabled label="1">D.{{ t.D }}</el-checkbox>
                <el-checkbox v-if="indexDduo === 4 && t.E != '' " disabled label="1">E.{{ t.E }}</el-checkbox>
                <el-checkbox v-if="indexDduo === 5 && t.F != '' " disabled label="1">F.{{ t.F }}</el-checkbox>
              </div>
            </div>
            <div class="container-dan-answer">
              <div class="container-dan-answer-left">
                <span>正确答案</span>：<span>{{ decrypted(t.duo) }}</span>
              </div>

            </div>
          </div>
        </div>
      </div>
      <!--    end-->

      <!--    判断题-->
      <div v-if="perViewData.pan.length > 0" class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.pan[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.pan" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div>({{ t.score }}分)</div>
              </div>
            </div>
            <div>
              <div class="container-dan-item" v-for="(itemPan,indexPan) in 2" :key="indexPan">
                <el-radio v-show="indexPan == 0" disabled label="1">正确</el-radio>
                <el-radio v-show="indexPan == 1" disabled label="0">错误</el-radio>
              </div>
            </div>
            <div class="container-dan-answer">
              <div class="container-dan-answer-left">
                <span>正确答案</span>：<span>{{ decrypted(t.pan) }}</span>
              </div>

            </div>
          </div>
        </div>
      </div>
      <!--    end-->

      <!--    填空题-->
      <div v-if="perViewData.tian.length > 0 " class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.tian[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.tian" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div style="width: 60px">({{ t.score }}分)</div>
              </div>
            </div>
            <div class="container-dan-answer" style="margin-top: 20px">
              <div class="container-dan-answer-left" style="display: flex;align-items: center;">
                <div style="width: 100px">正确答案</div>
                ：
                <div style="display:flex;flex-wrap: wrap;width: 90%">
                  <div v-for="(itemDuos,indexDuos) in spliceString(t.tian)" :key="indexDuos"
                       style="margin-right: 10px;">
                    <span style="font-size: 10px;">第{{ indexDuos + 1 }}空:<span
                      style="font-size: 18px;color: dodgerblue">{{ itemDuos }}</span></span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <!--    end-->


      <!--    解答题-->
      <div v-if="perViewData.jianda.length > 0 " class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.jianda[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.jianda" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div style="width: 60px">({{ t.score }}分)</div>
              </div>
            </div>
            <div>
            </div>
            <div class="container-dan-answer" style="margin-top: 20px">
              <div class="container-dan-answer-left">
                <span>参考答案</span>：
              </div>
            </div>
            <div class="container-dan-item">
              <div v-html="decrypted(t.content)"></div>
            </div>
          </div>
        </div>
      </div>
      <!--    end-->

      <!--    扫码题-->
      <div v-if="perViewData.saoma.length > 0 " class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.saoma[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.saoma" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div style="width: 80px">({{ t.score }}分)</div>
              </div>
            </div>
            <div class="container-dan-answer" style="margin-top: 20px">
              <div class="container-dan-answer-left">
                <span>参考答案</span>：
              </div>
            </div>
            <div class="container-dan-item">
              <div v-html="decrypted(t.content)"></div>
            </div>
          </div>
        </div>
      </div>
      <!--    end-->

      <!--    阅读题-->
      <div v-if="perViewData.read.length > 0 " class="container-dan">
        <div class="container-dan-item-conter">
          <!--        类型-->
          <div class="container-dan-type">
            <span>{{ perViewData.read[0].show_type }}</span>
          </div>
          <!--        end-->
          <div v-for="(t,i) in perViewData.read" :key="i" class="container-dan-item">
            <div class="container-dan-title">
              <div style="display: flex;align-items: center">
                <div>{{ i + 1 }}.</div>
                <div style="margin-left: 2px;width: 90%" v-html="t.title"></div>
                <div style="width: 80px">({{ countScore(t.json) }}分)</div>
              </div>
            </div>
            <div style="margin-left: 20px;margin-top: 20px">

              <div v-for="(item,index) in stringToArray(t.json)" :key="index">
                <!--              单选题-->
                <div v-if="item.type == '单选题'" style="margin-left: 10px">
                  <div>
                    <div class="container-dan-title">
                      <div style="display: flex;align-items: center">
                        <div>{{ index + 1 }}.</div>
                        <div style="margin-left: 2px;width: 90%" v-html="item.title"></div>
                        <div>({{ item.score }}分)</div>
                      </div>
                    </div>
                    <div class="container-dan-item" v-for="(itemDan,indexDan) in 6" :key="indexDan">
                      <el-radio v-if="indexDan === 0" disabled label="1">A.{{ item.A }}</el-radio>
                      <el-radio v-if="indexDan === 1" disabled label="1">B.{{ item.B }}</el-radio>
                      <el-radio v-if="indexDan === 2" disabled label="1">C.{{ item.C }}</el-radio>
                      <el-radio v-if="indexDan === 3" disabled label="1">D.{{ item.D }}</el-radio>
                      <el-radio v-if="indexDan === 4 && item.E != '' " disabled label="1">E.{{ item.E }}</el-radio>
                      <el-radio v-if="indexDan === 5 && item.F != '' " disabled label="1">F.{{ item.F }}</el-radio>
                    </div>
                  </div>
                  <div class="container-dan-answer">
                    <div class="container-dan-answer-left">
                      <span>正确答案</span>：<span>{{ item.answer }}</span>
                    </div>
                  </div>
                </div>
                <!--              end-->

                <!--              多选题-->
                <div v-if="item.type == '多选题'">
                  <div class="container-dan-item">
                    <div class="container-dan-title">
                      <div style="display: flex;align-items: center">
                        <div>{{ index + 1 }}.</div>
                        <div style="margin-left: 2px;width: 90%" v-html="item.title"></div>
                        <div>({{ item.score }}分)</div>
                      </div>
                    </div>
                    <div>
                      <div class="container-dan-item" v-for="(itemDduo,indexDduo) in 6" :key="indexDduo">
                        <el-checkbox v-if="indexDduo === 0" disabled label="1">A.{{ item.A }}</el-checkbox>
                        <el-checkbox v-if="indexDduo === 1" disabled label="1">B.{{ item.B }}</el-checkbox>
                        <el-checkbox v-if="indexDduo === 2" disabled label="1">C.{{ item.C }}</el-checkbox>
                        <el-checkbox v-if="indexDduo === 3" disabled label="1">D.{{ item.D }}</el-checkbox>
                        <el-checkbox v-if="indexDduo === 4 && item.E != '' " disabled label="1">E.{{ item.E }}</el-checkbox>
                        <el-checkbox v-if="indexDduo === 5 && item.F != '' " disabled label="1">F.{{ item.F }}</el-checkbox>
                      </div>
                    </div>
                    <div class="container-dan-answer">
                      <div class="container-dan-answer-left">
                        <span>正确答案</span>：<span>{{ item.answer }}</span>
                      </div>

                    </div>
                  </div>
                </div>
                <!--              end-->


                <!--    判断题-->
                <div v-if="item.type == '判断题'">
                  <div class="container-dan-item">
                    <div class="container-dan-title">
                      <div style="display: flex;align-items: center">
                        <div>{{ index + 1 }}.</div>
                        <div style="margin-left: 2px;width: 90%" v-html="item.title"></div>
                        <div>({{ item.score }}分)</div>
                      </div>
                    </div>
                    <div>
                      <div class="container-dan-item" v-for="(itemPan,indexPan) in 2" :key="indexPan">
                        <el-radio v-show="indexPan == 0" disabled label="1">正确</el-radio>
                        <el-radio v-show="indexPan == 1" disabled label="1">错误</el-radio>
                      </div>
                    </div>
                    <div class="container-dan-answer">
                      <div class="container-dan-answer-left">
                        <span>正确答案</span>：<span>{{ item.answer }}</span>
                      </div>

                    </div>
                  </div>
                </div>
                <!--    end-->

                <!--    填空题-->
                <div v-if="item.type == '填空题'">
                  <div class="container-dan-item">
                    <div class="container-dan-title">
                      <div style="display: flex;align-items: center">
                        <div>{{ index + 1 }}.</div>
                        <div style="margin-left: 2px;width: 90%" v-html="item.title"></div>
                        <div>({{ item.score }}分)</div>
                      </div>
                    </div>
                    <div class="container-dan-answer" style="margin-top: 20px">
                      <div class="container-dan-answer-left" style="display: flex;align-items: center;">
                        <div style="width: 80px">正确答案：</div>
                        <div style="display:flex;flex-wrap: wrap;width: 90%">
                          <div v-for="(itemDuos,indexDuos) in spliceStringNoLock(item.answer)" :key="indexDuos"
                               style="margin-right: 10px;">
                    <span style="font-size: 10px;">第{{ indexDuos + 1 }}空:<span
                      style="font-size: 18px">{{ itemDuos }}</span></span>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
                <!--    end-->


                <!--    解答题-->
                <div v-if="item.type == '简答题'">
                  <div v-for="(t,i) in 1" :key="i" class="container-dan-item">
                    <div class="container-dan-title">
                      <div style="display: flex;align-items: center">
                        <div>{{ index + 1 }}.</div>
                        <div style="margin-left: 2px;width: 90%" v-html="item.title"></div>
                        <div>({{ item.score }}分)</div>
                      </div>
                    </div>
                    <div class="container-dan-answer" style="margin-top: 20px">
                      <div class="container-dan-answer-left">
                        <span>参考答案：</span>
                      </div>
                    </div>
                    <div class="container-dan-item">
                      <div v-html="item.answer"></div>
                    </div>
                  </div>
                </div>
                <!--    end-->

              </div>


            </div>
          </div>
        </div>
      </div>
      <!--    end-->


    </div>
  </div>
</template>

<script>
import crypto from '../../../../utils/crypto';

export default {
  props: {
    perViewData: {
      type: Object,
      default: function () {
        return {
          dan: [],
          duo: [],
          pan: [],
          tian: [],
          jianda: [],
          saoma: [],
          read: [],
        }
      }
    }
  },
  data() {
    return {
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      num: 1,
      tian: '当子帧中CQI/PMI/RI上报与正向SR发生冲突时，哪个会被丢弃？（ )',
      danAnswer: 1,
      dan: ''
    }
  },
  methods: {

    decrypted: function (val) {
      return crypto.decrypt(val);
    },
    countScore: function (val) {
      let data = JSON.parse(this.decrypted(val));
      let sum = 0;
      if (data) {
        data.forEach((item) => {
          sum += item.score;
        })
      }
      return sum;
    },

    stringToArray: function (val) {
      console.log(JSON.parse(this.decrypted(val)))
      if (val) return JSON.parse(this.decrypted(val));
      return 0;
    },
    spliceString: function (val) {
      if (val) return this.decrypted(val).split(',');
      return 0;
    },
    spliceStringNoLock: function (val) {
      if (val) return val.split(',');
      return 0;
    },


    similarScore: function () {
      this.num = Math.round((this.similar(this.tian, '当子帧中CQI/PMI/RI上报与正向SR发生冲突时，哪个会被丢弃？', 2)) / 10);
      console.log(this.num)
    },
    /**
     * 相似度对比
     * @param s 文本1
     * @param t 文本2
     * @param f 小数位精确度，默认2位
     * @returns {string|number|*} 百分数前的数值，最大100. 比如 ：90.32
     */
    similar(s, t, f) {
      if (!s || !t) {
        return 0
      }
      if (s === t) {
        return 100;
      }
      let l = s.length > t.length ? s.length : t.length
      let n = s.length
      let m = t.length
      let d = []
      f = f || 2
      let min = function (a, b, c) {
        return a < b ? (a < c ? a : c) : (b < c ? b : c)
      }
      let i, j, si, tj, cost
      if (n === 0) return m
      if (m === 0) return n
      for (i = 0; i <= n; i++) {
        d[i] = []
        d[i][0] = i
      }
      for (j = 0; j <= m; j++) {
        d[0][j] = j
      }
      for (i = 1; i <= n; i++) {
        si = s.charAt(i - 1)
        for (j = 1; j <= m; j++) {
          tj = t.charAt(j - 1)
          if (si === tj) {
            cost = 0
          } else {
            cost = 1
          }
          d[i][j] = min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost)
        }
      }
      let res = (1 - d[n][m] / l) * 100
      return res.toFixed(f)
    }

  },
  created() {
    this.perViewData.read = [];
    this.perViewData.saoma = [];
    this.perViewData.jianda = [];
    this.perViewData.tian = [];
    this.perViewData.pan = [];
    this.perViewData.duo = [];
    this.perViewData.dan = [];
  }

}
</script>

<style scoped lang="scss">
.container {
  height: 68vh;
  overflow-y: scroll;

  .container-dan {
    margin-bottom: 20px;

    .container-dan-item-conter {
      border: 1px solid #cccccc;

      .container-dan-type {
        text-align: center;
        line-height: 40px;
        font-weight: bold;
        color: black;
        font-size: 18px;
        height: 40px;
        background-color: #e0e9f5;
      }

      .container-dan-item-jian {
        display: flex;
        align-items: center;
        background-color: #f8f9fa;
        padding: 10px;
        justify-content: space-between
      }

      .container-dan-item-duo {
        display: flex;
        flex-wrap: wrap;

        .container-dan-item-select {
          margin-left: 16px;
          margin-bottom: 10px;
        }
      }

      .container-dan-item {
        padding: 10px;

        .container-dan-title {
          :nth-child(1) {
            color: black;
            font-weight: bold;
          }

          :nth-child(2) {
            margin-left: 20px;
            color: grey;
            font-weight: bold;
          }
        }

      }

      .container-dan-answer {
        .container-dan-answer-left {
          color: black;
          font-weight: bold;
          margin-right: 20px;
        }

        .container-dan-answer-right {
          .answer-score {
            font-size: 16px;
          }

          color: black;
          font-weight: bold;
        }

        display: flex;
      }
    }

  }
}
</style>
